<!DOCTYPE html>
<html class="no-js css-menubar" lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
  <meta name="description" content="bootstrap admin template">
  <meta name="author" content="">

  <title>Colors | Remark Admin Template</title>

  <link rel="apple-touch-icon" href="../assets/images/apple-touch-icon.png">
  <link rel="shortcut icon" href="../assets/images/favicon.ico">

  <!-- Stylesheets -->
  <link rel="stylesheet" href="../../global/css/bootstrap.min.css?v2.2.0">
  <link rel="stylesheet" href="../../global/css/bootstrap-extend.min.css?v2.2.0">
  <link rel="stylesheet" href="../assets/css/site.min.css?v2.2.0">

  <!-- Skin tools (demo site only) -->
  <link rel="stylesheet" href="../../global/css/skintools.min.css?v2.2.0">
  <script src="../assets/js/sections/skintools.min.js"></script>

  <!-- Plugins -->
  <link rel="stylesheet" href="../../global/vendor/animsition/animsition.min.css?v2.2.0">
  <link rel="stylesheet" href="../../global/vendor/asscrollable/asScrollable.min.css?v2.2.0">
  <link rel="stylesheet" href="../../global/vendor/switchery/switchery.min.css?v2.2.0">
  <link rel="stylesheet" href="../../global/vendor/intro-js/introjs.min.css?v2.2.0">
  <link rel="stylesheet" href="../../global/vendor/slidepanel/slidePanel.min.css?v2.2.0">
  <link rel="stylesheet" href="../../global/vendor/flag-icon-css/flag-icon.min.css?v2.2.0">

  <!-- Page -->
  <link rel="stylesheet" href="../assets/examples/css/uikit/colors.min.css?v2.2.0">

  <!-- Fonts -->
  <link rel="stylesheet" href="../../global/fonts/web-icons/web-icons.min.css?v2.2.0">
  <link rel="stylesheet" href="../../global/fonts/brand-icons/brand-icons.min.css?v2.2.0">
  <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Roboto:300,400,500,300italic'>


  <!--[if lt IE 9]>
    <script src="../../global/vendor/html5shiv/html5shiv.min.js"></script>
    <![endif]-->

  <!--[if lt IE 10]>
    <script src="../../global/vendor/media-match/media.match.min.js"></script>
    <script src="../../global/vendor/respond/respond.min.js"></script>
    <![endif]-->

  <!-- Scripts -->
  <script src="../../global/vendor/modernizr/modernizr.min.js"></script>
  <script src="../../global/vendor/breakpoints/breakpoints.min.js"></script>
  <script>
    Breakpoints();
  </script>
</head>
<body>
  <!--[if lt IE 8]>
        <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

  <nav class="site-navbar navbar navbar-default navbar-fixed-top navbar-mega" role="navigation">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle hamburger hamburger-close navbar-toggle-left hided"
      data-toggle="menubar">
        <span class="sr-only">Toggle navigation</span>
        <span class="hamburger-bar"></span>
      </button>
      <button type="button" class="navbar-toggle collapsed" data-target="#site-navbar-collapse"
      data-toggle="collapse">
        <i class="icon wb-more-horizontal" aria-hidden="true"></i>
      </button>
      <div class="navbar-brand navbar-brand-center site-gridmenu-toggle" data-toggle="gridmenu">
        <img class="navbar-brand-logo" src="../assets/images/logo.png" title="Remark">
        <span class="navbar-brand-text hidden-xs"> Remark</span>
      </div>
      <button type="button" class="navbar-toggle collapsed" data-target="#site-navbar-search"
      data-toggle="collapse">
        <span class="sr-only">Toggle Search</span>
        <i class="icon wb-search" aria-hidden="true"></i>
      </button>
    </div>

    <div class="navbar-container container-fluid">
      <!-- Navbar Collapse -->
      <div class="collapse navbar-collapse navbar-collapse-toolbar" id="site-navbar-collapse">
        <!-- Navbar Toolbar -->
        <ul class="nav navbar-toolbar">
          <li class="hidden-float" id="toggleMenubar">
            <a data-toggle="menubar" href="#" role="button">
              <i class="icon hamburger hamburger-arrow-left">
                  <span class="sr-only">Toggle menubar</span>
                  <span class="hamburger-bar"></span>
                </i>
            </a>
          </li>
          <li class="hidden-xs" id="toggleFullscreen">
            <a class="icon icon-fullscreen" data-toggle="fullscreen" href="#" role="button">
              <span class="sr-only">Toggle fullscreen</span>
            </a>
          </li>
          <li class="hidden-float">
            <a class="icon wb-search" data-toggle="collapse" href="#" data-target="#site-navbar-search"
            role="button">
              <span class="sr-only">Toggle Search</span>
            </a>
          </li>
          <li class="dropdown dropdown-fw dropdown-mega">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"
            data-animation="fade" role="button">Mega <i class="icon wb-chevron-down-mini" aria-hidden="true"></i></a>
            <ul class="dropdown-menu" role="menu">
              <li role="presentation">
                <div class="mega-content">
                  <div class="row">
                    <div class="col-sm-4">
                      <h5>UI Kit</h5>
                      <ul class="blocks-2">
                        <li class="mega-menu margin-0">
                          <ul class="list-icons">
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="../advanced/animation.html">Animation</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="buttons.html">Buttons</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="colors.html">Colors</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="dropdowns.html">Dropdowns</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="icons.html">Icons</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="../advanced/lightbox.html">Lightbox</a>
                            </li>
                          </ul>
                        </li>
                        <li class="mega-menu margin-0">
                          <ul class="list-icons">
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="modals.html">Modals</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="panel-structure.html">Panels</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="../structure/overlay.html">Overlay</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="tooltip-popover.html ">Tooltips</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="../advanced/scrollable.html">Scrollable</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="typography.html">Typography</a>
                            </li>
                          </ul>
                        </li>
                      </ul>
                    </div>
                    <div class="col-sm-4">
                      <h5>Media
                        <span class="badge badge-success">4</span>
                      </h5>
                      <ul class="blocks-3">
                        <li>
                          <a class="thumbnail margin-0" href="javascript:void(0)">
                            <img class="width-full" src="../../global/photos/view-1-150x100.jpg" alt="..."
                            />
                          </a>
                        </li>
                        <li>
                          <a class="thumbnail margin-0" href="javascript:void(0)">
                            <img class="width-full" src="../../global/photos/view-2-150x100.jpg" alt="..."
                            />
                          </a>
                        </li>
                        <li>
                          <a class="thumbnail margin-0" href="javascript:void(0)">
                            <img class="width-full" src="../../global/photos/view-3-150x100.jpg" alt="..."
                            />
                          </a>
                        </li>
                        <li>
                          <a class="thumbnail margin-0" href="javascript:void(0)">
                            <img class="width-full" src="../../global/photos/view-4-150x100.jpg" alt="..."
                            />
                          </a>
                        </li>
                        <li>
                          <a class="thumbnail margin-0" href="javascript:void(0)">
                            <img class="width-full" src="../../global/photos/view-5-150x100.jpg" alt="..."
                            />
                          </a>
                        </li>
                        <li>
                          <a class="thumbnail margin-0" href="javascript:void(0)">
                            <img class="width-full" src="../../global/photos/view-6-150x100.jpg" alt="..."
                            />
                          </a>
                        </li>
                      </ul>
                    </div>
                    <div class="col-sm-4">
                      <h5 class="margin-bottom-0">Accordion</h5>
                      <!-- Accordion -->
                      <div class="panel-group panel-group-simple" id="siteMegaAccordion" aria-multiselectable="true"
                      role="tablist">
                        <div class="panel">
                          <div class="panel-heading" id="siteMegaAccordionHeadingOne" role="tab">
                            <a class="panel-title" data-toggle="collapse" href="#siteMegaCollapseOne" data-parent="#siteMegaAccordion"
                            aria-expanded="false" aria-controls="siteMegaCollapseOne">
                                Collapsible Group Item #1
                              </a>
                          </div>
                          <div class="panel-collapse collapse" id="siteMegaCollapseOne" aria-labelledby="siteMegaAccordionHeadingOne"
                          role="tabpanel">
                            <div class="panel-body">
                              De moveat laudatur vestra parum doloribus labitur sentire partes, eripuit praesenti
                              congressus ostendit alienae, voluptati ornateque
                              accusamus clamat reperietur convicia albucius.
                            </div>
                          </div>
                        </div>
                        <div class="panel">
                          <div class="panel-heading" id="siteMegaAccordionHeadingTwo" role="tab">
                            <a class="panel-title collapsed" data-toggle="collapse" href="#siteMegaCollapseTwo"
                            data-parent="#siteMegaAccordion" aria-expanded="false"
                            aria-controls="siteMegaCollapseTwo">
                                Collapsible Group Item #2
                              </a>
                          </div>
                          <div class="panel-collapse collapse" id="siteMegaCollapseTwo" aria-labelledby="siteMegaAccordionHeadingTwo"
                          role="tabpanel">
                            <div class="panel-body">
                              Praestabiliorem. Pellat excruciant legantur ullum leniter vacare foris voluptate
                              loco ignavi, credo videretur multoque choro fatemur
                              mortis animus adoptionem, bello statuat expediunt
                              naturales.
                            </div>
                          </div>
                        </div>

                        <div class="panel">
                          <div class="panel-heading" id="siteMegaAccordionHeadingThree" role="tab">
                            <a class="panel-title collapsed" data-toggle="collapse" href="#siteMegaCollapseThree"
                            data-parent="#siteMegaAccordion" aria-expanded="false"
                            aria-controls="siteMegaCollapseThree">
                                Collapsible Group Item #3
                              </a>
                          </div>
                          <div class="panel-collapse collapse" id="siteMegaCollapseThree" aria-labelledby="siteMegaAccordionHeadingThree"
                          role="tabpanel">
                            <div class="panel-body">
                              Horum, antiquitate perciperet d conspectum locus obruamus animumque perspici probabis
                              suscipere. Desiderat magnum, contenta poena desiderant
                              concederetur menandri damna disputandum corporum.
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End Accordion -->
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </li>
        </ul>
        <!-- End Navbar Toolbar -->

        <!-- Navbar Toolbar Right -->
        <ul class="nav navbar-toolbar navbar-right navbar-toolbar-right">
          <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)" data-animation="scale-up"
            aria-expanded="false" role="button">
              <span class="flag-icon flag-icon-us"></span>
            </a>
            <ul class="dropdown-menu" role="menu">
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem">
                  <span class="flag-icon flag-icon-gb"></span> English</a>
              </li>
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem">
                  <span class="flag-icon flag-icon-fr"></span> French</a>
              </li>
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem">
                  <span class="flag-icon flag-icon-cn"></span> Chinese</a>
              </li>
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem">
                  <span class="flag-icon flag-icon-de"></span> German</a>
              </li>
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem">
                  <span class="flag-icon flag-icon-nl"></span> Dutch</a>
              </li>
            </ul>
          </li>
          <li class="dropdown">
            <a class="navbar-avatar dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"
            data-animation="scale-up" role="button">
              <span class="avatar avatar-online">
                <img src="../../global/portraits/5.jpg" alt="...">
                <i></i>
              </span>
            </a>
            <ul class="dropdown-menu" role="menu">
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem"><i class="icon wb-user" aria-hidden="true"></i> Profile</a>
              </li>
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem"><i class="icon wb-payment" aria-hidden="true"></i> Billing</a>
              </li>
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem"><i class="icon wb-settings" aria-hidden="true"></i> Settings</a>
              </li>
              <li class="divider" role="presentation"></li>
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem"><i class="icon wb-power" aria-hidden="true"></i> Logout</a>
              </li>
            </ul>
          </li>
          <li class="dropdown">
            <a data-toggle="dropdown" href="javascript:void(0)" title="Notifications" aria-expanded="false"
            data-animation="scale-up" role="button">
              <i class="icon wb-bell" aria-hidden="true"></i>
              <span class="badge badge-danger up">5</span>
            </a>
            <ul class="dropdown-menu dropdown-menu-right dropdown-menu-media" role="menu">
              <li class="dropdown-menu-header" role="presentation">
                <h5>NOTIFICATIONS</h5>
                <span class="label label-round label-danger">New 5</span>
              </li>

              <li class="list-group" role="presentation">
                <div data-role="container">
                  <div data-role="content">
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <i class="icon wb-order bg-red-600 white icon-circle" aria-hidden="true"></i>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">A new order has been placed</h6>
                          <time class="media-meta" datetime="2016-06-12T20:50:48+08:00">5 hours ago</time>
                        </div>
                      </div>
                    </a>
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <i class="icon wb-user bg-green-600 white icon-circle" aria-hidden="true"></i>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">Completed the task</h6>
                          <time class="media-meta" datetime="2016-06-11T18:29:20+08:00">2 days ago</time>
                        </div>
                      </div>
                    </a>
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <i class="icon wb-settings bg-red-600 white icon-circle" aria-hidden="true"></i>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">Settings updated</h6>
                          <time class="media-meta" datetime="2016-06-11T14:05:00+08:00">2 days ago</time>
                        </div>
                      </div>
                    </a>
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <i class="icon wb-calendar bg-blue-600 white icon-circle" aria-hidden="true"></i>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">Event started</h6>
                          <time class="media-meta" datetime="2016-06-10T13:50:18+08:00">3 days ago</time>
                        </div>
                      </div>
                    </a>
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <i class="icon wb-chat bg-orange-600 white icon-circle" aria-hidden="true"></i>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">Message received</h6>
                          <time class="media-meta" datetime="2016-06-10T12:34:48+08:00">3 days ago</time>
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
              <li class="dropdown-menu-footer" role="presentation">
                <a class="dropdown-menu-footer-btn" href="javascript:void(0)" role="button">
                  <i class="icon wb-settings" aria-hidden="true"></i>
                </a>
                <a href="javascript:void(0)" role="menuitem">
                    All notifications
                  </a>
              </li>
            </ul>
          </li>
          <li class="dropdown">
            <a data-toggle="dropdown" href="javascript:void(0)" title="Messages" aria-expanded="false"
            data-animation="scale-up" role="button">
              <i class="icon wb-envelope" aria-hidden="true"></i>
              <span class="badge badge-info up">3</span>
            </a>
            <ul class="dropdown-menu dropdown-menu-right dropdown-menu-media" role="menu">
              <li class="dropdown-menu-header" role="presentation">
                <h5>MESSAGES</h5>
                <span class="label label-round label-info">New 3</span>
              </li>

              <li class="list-group" role="presentation">
                <div data-role="container">
                  <div data-role="content">
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <span class="avatar avatar-sm avatar-online">
                            <img src="../../global/portraits/2.jpg" alt="..." />
                            <i></i>
                          </span>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">Mary Adams</h6>
                          <div class="media-meta">
                            <time datetime="2016-06-17T20:22:05+08:00">30 minutes ago</time>
                          </div>
                          <div class="media-detail">Anyways, i would like just do it</div>
                        </div>
                      </div>
                    </a>
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <span class="avatar avatar-sm avatar-off">
                            <img src="../../global/portraits/3.jpg" alt="..." />
                            <i></i>
                          </span>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">Caleb Richards</h6>
                          <div class="media-meta">
                            <time datetime="2016-06-17T12:30:30+08:00">12 hours ago</time>
                          </div>
                          <div class="media-detail">I checheck the document. But there seems</div>
                        </div>
                      </div>
                    </a>
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <span class="avatar avatar-sm avatar-busy">
                            <img src="../../global/portraits/4.jpg" alt="..." />
                            <i></i>
                          </span>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">June Lane</h6>
                          <div class="media-meta">
                            <time datetime="2016-06-16T18:38:40+08:00">2 days ago</time>
                          </div>
                          <div class="media-detail">Lorem ipsum Id consectetur et minim</div>
                        </div>
                      </div>
                    </a>
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <span class="avatar avatar-sm avatar-away">
                            <img src="../../global/portraits/5.jpg" alt="..." />
                            <i></i>
                          </span>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">Edward Fletcher</h6>
                          <div class="media-meta">
                            <time datetime="2016-06-15T20:34:48+08:00">3 days ago</time>
                          </div>
                          <div class="media-detail">Dolor et irure cupidatat commodo nostrud nostrud.</div>
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
              <li class="dropdown-menu-footer" role="presentation">
                <a class="dropdown-menu-footer-btn" href="javascript:void(0)" role="button">
                  <i class="icon wb-settings" aria-hidden="true"></i>
                </a>
                <a href="javascript:void(0)" role="menuitem">
                    See all messages
                  </a>
              </li>
            </ul>
          </li>
          <li id="toggleChat">
            <a data-toggle="site-sidebar" href="javascript:void(0)" title="Chat" data-url="../site-sidebar.tpl">
              <i class="icon wb-chat" aria-hidden="true"></i>
            </a>
          </li>
        </ul>
        <!-- End Navbar Toolbar Right -->
      </div>
      <!-- End Navbar Collapse -->

      <!-- Site Navbar Seach -->
      <div class="collapse navbar-search-overlap" id="site-navbar-search">
        <form role="search">
          <div class="form-group">
            <div class="input-search">
              <i class="input-search-icon wb-search" aria-hidden="true"></i>
              <input type="text" class="form-control" name="site-search" placeholder="Search...">
              <button type="button" class="input-search-close icon wb-close" data-target="#site-navbar-search"
              data-toggle="collapse" aria-label="Close"></button>
            </div>
          </div>
        </form>
      </div>
      <!-- End Site Navbar Seach -->
    </div>
  </nav>
  <div class="site-menubar">
    <div class="site-menubar-body">
      <div>
        <div>
          <ul class="site-menu">
            <li class="site-menu-category">General</li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-dashboard" aria-hidden="true"></i>
                <span class="site-menu-title">Dashboard</span>
                <div class="site-menu-badge">
                  <span class="badge badge-success">3</span>
                </div>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item">
                  <a class="animsition-link" href="../index.html">
                    <span class="site-menu-title">Dashboard v1</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../dashboard/v2.html">
                    <span class="site-menu-title">Dashboard v2</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../dashboard/ecommerce.html">
                    <span class="site-menu-title">Ecommerce</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../dashboard/analytics.html">
                    <span class="site-menu-title">Analytics</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../dashboard/team.html">
                    <span class="site-menu-title">Team</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-layout" aria-hidden="true"></i>
                <span class="site-menu-title">Layouts</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/menu-collapsed.html">
                    <span class="site-menu-title">Menu Collapsed</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/menu-collapsed-alt.html">
                    <span class="site-menu-title">Menu Collapsed Alt</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/menu-expended.html">
                    <span class="site-menu-title">Menu Expended</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/grids.html">
                    <span class="site-menu-title">Grid Scaffolding</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/layout-grid.html">
                    <span class="site-menu-title">Layout Grid</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/headers.html">
                    <span class="site-menu-title">Different Headers</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/panel-transition.html">
                    <span class="site-menu-title">Panel Transition</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/boxed.html">
                    <span class="site-menu-title">Boxed Layout</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/two-columns.html">
                    <span class="site-menu-title">Two Columns</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/menubar-flipped.html">
                    <span class="site-menu-title">Menubar Flipped</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/menubar-native-scrolling.html">
                    <span class="site-menu-title">Menubar Native Scrolling</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/bordered-header.html">
                    <span class="site-menu-title">Bordered Header</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/page-aside-fixed.html">
                    <span class="site-menu-title">Page Aside Fixed</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-file" aria-hidden="true"></i>
                <span class="site-menu-title">Pages</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item has-sub">
                  <a href="javascript:void(0)">
                    <span class="site-menu-title">Errors</span>
                    <span class="site-menu-arrow"></span>
                  </a>
                  <ul class="site-menu-sub">
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../pages/error-400.html">
                        <span class="site-menu-title">400</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../pages/error-403.html">
                        <span class="site-menu-title">403</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../pages/error-404.html">
                        <span class="site-menu-title">404</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../pages/error-500.html">
                        <span class="site-menu-title">500</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../pages/error-503.html">
                        <span class="site-menu-title">503</span>
                      </a>
                    </li>
                  </ul>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/faq.html">
                    <span class="site-menu-title">FAQ</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/gallery.html">
                    <span class="site-menu-title">Gallery</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/gallery-grid.html">
                    <span class="site-menu-title">Gallery Grid</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/search-result.html">
                    <span class="site-menu-title">Search Result</span>
                  </a>
                </li>
                <li class="site-menu-item has-sub">
                  <a href="javascript:void(0)">
                    <span class="site-menu-title">Maps</span>
                    <span class="site-menu-arrow"></span>
                  </a>
                  <ul class="site-menu-sub">
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../pages/map-google.html">
                        <span class="site-menu-title">Google Maps</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../pages/map-vector.html">
                        <span class="site-menu-title">Vector Maps</span>
                      </a>
                    </li>
                  </ul>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/maintenance.html">
                    <span class="site-menu-title">Maintenance</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/forgot-password.html">
                    <span class="site-menu-title">Forgot Password</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/lockscreen.html">
                    <span class="site-menu-title">Lockscreen</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/login.html">
                    <span class="site-menu-title">Login</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/register.html">
                    <span class="site-menu-title">Register</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/login-v2.html">
                    <span class="site-menu-title">Login V2</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/register-v2.html">
                    <span class="site-menu-title">Register V2</span>
                    <div class="site-menu-label">
                      <span class="label label-info label-round">new</span>
                    </div>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/login-v3.html">
                    <span class="site-menu-title">Login V3</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/register-v3.html">
                    <span class="site-menu-title">Register V3</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/user.html">
                    <span class="site-menu-title">User List</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/invoice.html">
                    <span class="site-menu-title">Invoice</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/blank.html">
                    <span class="site-menu-title">Blank Page</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/email.html">
                    <span class="site-menu-title">Email</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/code-editor.html">
                    <span class="site-menu-title">Code Editor</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/profile.html">
                    <span class="site-menu-title">Profile</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/site-map.html">
                    <span class="site-menu-title">Sitemap</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-category">Elements</li>
            <li class="site-menu-item has-sub active open">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-bookmark" aria-hidden="true"></i>
                <span class="site-menu-title">Basic UI</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item has-sub">
                  <a href="javascript:void(0)">
                    <span class="site-menu-title">Panel</span>
                    <span class="site-menu-arrow"></span>
                  </a>
                  <ul class="site-menu-sub">
                    <li class="site-menu-item">
                      <a class="animsition-link" href="panel-structure.html">
                        <span class="site-menu-title">Panel Structure</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="panel-actions.html">
                        <span class="site-menu-title">Panel Actions</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="panel-portlets.html">
                        <span class="site-menu-title">Panel Portlets</span>
                      </a>
                    </li>
                  </ul>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="buttons.html">
                    <span class="site-menu-title">Buttons</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="dropdowns.html">
                    <span class="site-menu-title">Dropdowns</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="icons.html">
                    <span class="site-menu-title">Icons</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="list.html">
                    <span class="site-menu-title">List</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="tooltip-popover.html">
                    <span class="site-menu-title">Tooltip &amp; Popover</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="modals.html">
                    <span class="site-menu-title">Modals</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="tabs-accordions.html">
                    <span class="site-menu-title">Tabs &amp; Accordions</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="images.html">
                    <span class="site-menu-title">Images</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="badges-labels.html">
                    <span class="site-menu-title">Badges &amp; Labels</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="progress-bars.html">
                    <span class="site-menu-title">Progress Bars</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="carousel.html">
                    <span class="site-menu-title">Carousel</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="typography.html">
                    <span class="site-menu-title">Typography</span>
                  </a>
                </li>
                <li class="site-menu-item active">
                  <a class="animsition-link" href="colors.html">
                    <span class="site-menu-title">Colors</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="utilities.html">
                    <span class="site-menu-title">Utilties</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-hammer" aria-hidden="true"></i>
                <span class="site-menu-title">Advanced UI</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item hidden-xs site-tour-trigger">
                  <a href="javascript:void(0)">
                    <span class="site-menu-title">Tour</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/animation.html">
                    <span class="site-menu-title">Animation</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/highlight.html">
                    <span class="site-menu-title">Highlight</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/lightbox.html">
                    <span class="site-menu-title">Lightbox</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/scrollable.html">
                    <span class="site-menu-title">Scrollable</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/rating.html">
                    <span class="site-menu-title">Rating</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/context-menu.html">
                    <span class="site-menu-title">Context Menu</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/alertify.html">
                    <span class="site-menu-title">Alertify</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/masonry.html">
                    <span class="site-menu-title">Masonry</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/treeview.html">
                    <span class="site-menu-title">Treeview</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/toastr.html">
                    <span class="site-menu-title">Toastr</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/maps-vector.html">
                    <span class="site-menu-title">Vector Maps</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/maps-google.html">
                    <span class="site-menu-title">Google Maps</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/sortable-nestable.html">
                    <span class="site-menu-title">Sortable &amp; Nestable</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/bootbox-sweetalert.html">
                    <span class="site-menu-title">Bootbox &amp; Sweetalert</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-plugin" aria-hidden="true"></i>
                <span class="site-menu-title">Structure</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/alerts.html">
                    <span class="site-menu-title">Alerts</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/ribbon.html">
                    <span class="site-menu-title">Ribbon</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/pricing-tables.html">
                    <span class="site-menu-title">Pricing Tables</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/overlay.html">
                    <span class="site-menu-title">Overlay</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/cover.html">
                    <span class="site-menu-title">Cover</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/timeline-simple.html">
                    <span class="site-menu-title">Simple Timeline</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/timeline.html">
                    <span class="site-menu-title">Timeline</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/step.html">
                    <span class="site-menu-title">Step</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/comments.html">
                    <span class="site-menu-title">Comments</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/media.html">
                    <span class="site-menu-title">Media</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/chat.html">
                    <span class="site-menu-title">Chat</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/testimonials.html">
                    <span class="site-menu-title">Testimonials</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/nav.html">
                    <span class="site-menu-title">Nav</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/navbars.html">
                    <span class="site-menu-title">Navbars</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/blockquotes.html">
                    <span class="site-menu-title">Blockquotes</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/pagination.html">
                    <span class="site-menu-title">Pagination</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/breadcrumbs.html">
                    <span class="site-menu-title">Breadcrumbs</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-extension" aria-hidden="true"></i>
                <span class="site-menu-title">Widgets</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item">
                  <a class="animsition-link" href="../widgets/statistics.html">
                    <span class="site-menu-title">Statistics Widgets</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../widgets/data.html">
                    <span class="site-menu-title">Data Widgets</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../widgets/blog.html">
                    <span class="site-menu-title">Blog Widgets</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../widgets/chart.html">
                    <span class="site-menu-title">Chart Widgets</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../widgets/social.html">
                    <span class="site-menu-title">Social Widgets</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../widgets/weather.html">
                    <span class="site-menu-title">Weather Widgets</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-library" aria-hidden="true"></i>
                <span class="site-menu-title">Forms</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/general.html">
                    <span class="site-menu-title">General Elements</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/material.html">
                    <span class="site-menu-title">Material Elements</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/advanced.html">
                    <span class="site-menu-title">Advanced Elements</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/layouts.html">
                    <span class="site-menu-title">Form Layouts</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/wizard.html">
                    <span class="site-menu-title">Form Wizard</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/validation.html">
                    <span class="site-menu-title">Form Validation</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/masks.html">
                    <span class="site-menu-title">Form Masks</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/editable.html">
                    <span class="site-menu-title">Form Editable</span>
                  </a>
                </li>
                <li class="site-menu-item has-sub">
                  <a href="javascript:void(0)">
                    <span class="site-menu-title">Editors</span>
                    <span class="site-menu-arrow"></span>
                  </a>
                  <ul class="site-menu-sub">
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../forms/editor-summernote.html">
                        <span class="site-menu-title">Summernote</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../forms/editor-markdown.html">
                        <span class="site-menu-title">Markdown</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../forms/editor-ace.html">
                        <span class="site-menu-title">Ace Editor</span>
                      </a>
                    </li>
                  </ul>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/image-cropping.html">
                    <span class="site-menu-title">Image Cropping</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/file-uploads.html">
                    <span class="site-menu-title">File Uploads</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-table" aria-hidden="true"></i>
                <span class="site-menu-title">Tables</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item">
                  <a class="animsition-link" href="../tables/basic.html">
                    <span class="site-menu-title">Basic Tables</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../tables/bootstrap.html">
                    <span class="site-menu-title">Bootstrap Tables</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../tables/floatthead.html">
                    <span class="site-menu-title">floatThead</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../tables/responsive.html">
                    <span class="site-menu-title">Responsive Tables</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../tables/editable.html">
                    <span class="site-menu-title">Editable Tables</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../tables/jsgrid.html">
                    <span class="site-menu-title">jsGrid</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../tables/footable.html">
                    <span class="site-menu-title">FooTable</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../tables/datatable.html">
                    <span class="site-menu-title">DataTables</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-pie-chart" aria-hidden="true"></i>
                <span class="site-menu-title">Chart</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/chartjs.html">
                    <span class="site-menu-title">Chart.js</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/gauges.html">
                    <span class="site-menu-title">Gauges</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/flot.html">
                    <span class="site-menu-title">Flot</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/peity.html">
                    <span class="site-menu-title">Peity</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/sparkline.html">
                    <span class="site-menu-title">Sparkline</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/morris.html">
                    <span class="site-menu-title">Morris</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/chartist.html">
                    <span class="site-menu-title">Chartist.js</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/rickshaw.html">
                    <span class="site-menu-title">Rickshaw</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/pie-progress.html">
                    <span class="site-menu-title">Pie Progress</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/c3.html">
                    <span class="site-menu-title">C3</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-category">Apps</li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-grid-4" aria-hidden="true"></i>
                <span class="site-menu-title">Apps</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/contacts/contacts.html">
                    <span class="site-menu-title">Contacts</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/calendar/calendar.html">
                    <span class="site-menu-title">Calendar</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/notebook/notebook.html">
                    <span class="site-menu-title">Notebook</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/taskboard/taskboard.html">
                    <span class="site-menu-title">Taskboard</span>
                  </a>
                </li>
                <li class="site-menu-item has-sub">
                  <a href="javascript:void(0)">
                    <span class="site-menu-title">Documents</span>
                    <span class="site-menu-arrow"></span>
                  </a>
                  <ul class="site-menu-sub">
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../apps/documents/articles.html">
                        <span class="site-menu-title">Articles</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../apps/documents/categories.html">
                        <span class="site-menu-title">Categories</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../apps/documents/article.html">
                        <span class="site-menu-title">Article</span>
                      </a>
                    </li>
                  </ul>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/forum/forum.html">
                    <span class="site-menu-title">Forum</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/message/message.html">
                    <span class="site-menu-title">Message</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/projects/projects.html">
                    <span class="site-menu-title">Projects</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/mailbox/mailbox.html">
                    <span class="site-menu-title">Mailbox</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/media/overview.html">
                    <span class="site-menu-title">Media</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/work/work.html">
                    <span class="site-menu-title">Work</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/location/location.html">
                    <span class="site-menu-title">Location</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-category">Angular UI</li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../angular/index.html">
                <i class="site-menu-icon bd-angular" aria-hidden="true"></i>
                <span class="site-menu-title">Angular UI</span>
                <div class="site-menu-label">
                  <span class="label label-danger label-round">new</span>
                </div>
              </a>
            </li>
          </ul>

          <div class="site-menubar-section">
            <h5>
              Milestone
              <span class="pull-right">30%</span>
            </h5>
            <div class="progress progress-xs">
              <div class="progress-bar active" style="width: 30%;" role="progressbar"></div>
            </div>
            <h5>
              Release
              <span class="pull-right">60%</span>
            </h5>
            <div class="progress progress-xs">
              <div class="progress-bar progress-bar-warning" style="width: 60%;" role="progressbar"></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="site-menubar-footer">
      <a href="javascript: void(0);" class="fold-show" data-placement="top" data-toggle="tooltip"
      data-original-title="Settings">
        <span class="icon wb-settings" aria-hidden="true"></span>
      </a>
      <a href="javascript: void(0);" data-placement="top" data-toggle="tooltip" data-original-title="Lock">
        <span class="icon wb-eye-close" aria-hidden="true"></span>
      </a>
      <a href="javascript: void(0);" data-placement="top" data-toggle="tooltip" data-original-title="Logout">
        <span class="icon wb-power" aria-hidden="true"></span>
      </a>
    </div>
  </div>
  <div class="site-gridmenu">
    <div>
      <div>
        <ul>
          <li>
            <a href="../apps/mailbox/mailbox.html">
              <i class="icon wb-envelope"></i>
              <span>Mailbox</span>
            </a>
          </li>
          <li>
            <a href="../apps/calendar/calendar.html">
              <i class="icon wb-calendar"></i>
              <span>Calendar</span>
            </a>
          </li>
          <li>
            <a href="../apps/contacts/contacts.html">
              <i class="icon wb-user"></i>
              <span>Contacts</span>
            </a>
          </li>
          <li>
            <a href="../apps/media/overview.html">
              <i class="icon wb-camera"></i>
              <span>Media</span>
            </a>
          </li>
          <li>
            <a href="../apps/documents/categories.html">
              <i class="icon wb-order"></i>
              <span>Documents</span>
            </a>
          </li>
          <li>
            <a href="../apps/projects/projects.html">
              <i class="icon wb-image"></i>
              <span>Project</span>
            </a>
          </li>
          <li>
            <a href="../apps/forum/forum.html">
              <i class="icon wb-chat-group"></i>
              <span>Forum</span>
            </a>
          </li>
          <li>
            <a href="../index.html">
              <i class="icon wb-dashboard"></i>
              <span>Dashboard</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>


  <!-- Page -->
  <div class="page animsition">
    <div class="page-header">
      <ol class="breadcrumb">
        <li><a href="../index.html">Home</a></li>
        <li class="active">Basic UI</li>
      </ol>
      <h1 class="page-title">Colors</h1>
      <div class="page-header-actions">
        <button type="button" class="btn btn-sm btn-icon btn-inverse btn-round" data-toggle="tooltip"
        data-original-title="Edit">
          <i class="icon wb-pencil" aria-hidden="true"></i>
        </button>
        <button type="button" class="btn btn-sm btn-icon btn-inverse btn-round" data-toggle="tooltip"
        data-original-title="Refresh">
          <i class="icon wb-refresh" aria-hidden="true"></i>
        </button>
        <button type="button" class="btn btn-sm btn-icon btn-inverse btn-round" data-toggle="tooltip"
        data-original-title="Setting">
          <i class="icon wb-settings" aria-hidden="true"></i>
        </button>
      </div>
    </div>
    <div class="page-content">
      <!-- Panel -->
      <div class="panel">
        <div class="panel-heading">
          <h3 class="panel-title">Style</h3>
        </div>
        <div class="panel-body container-fluid">

          <!-- Example Base Color Palette -->
          <div class="example-wrap">
            <h4 class="example-title">Base Color Palette</h4>
            <p>The dashboard will synergize with the colour selection made by the
              user and appropriately amend. Similarly, all other elements will
              sync according to the base colours.
            </p>
            <div class="example color-primaries">
              <div class="bg-blue-grey-200">#e4eaec</div>
              <div class="bg-blue-grey-600">#526069</div>
              <div class="bg-blue-600">#62a8ea</div>
              <div class="bg-cyan-600">#57c7d4</div>
              <div class="bg-teal-600">#3aa99e</div>
              <div class="bg-orange-600">#f2a654</div>
              <div class="bg-red-600">#f96868</div>
              <div class="bg-purple-600">#926dde</div>
            </div>
          </div>
          <!-- End Example Base Color Palette -->


          <!-- Example Color Palette -->
          <div class="example-wrap">
            <h4 class="example-title">Color Palette</h4>
            <p>This color palette comprises primary and accent colors that can be
              used for illustration or to develop your brand colors.
              <br/> They've been designed to work harmoniously with each other.</p>
            <p class="margin-bottom-30">The color palette starts with primary colors and fills in the spectrum
              to create a complete and usable palette for web
              <br/> project. We suggests using the 500 colors as the primary colors
              in your project and the other colors as accents colors.</p>
            <div class="row row-lg color-palette">
              <div class="col-sm-4 col-md-3">
                <h5 class="text-uppercase">red</h5>
                <ul class="list-group">
                  <li class="bg-red-800 list-group-item">
                    <span>800</span> /
                    <span>#d6494b</span>
                  </li>
                  <li class="bg-red-700 list-group-item">
                    <span>700</span> /
                    <span>#e9595b</span>
                  </li>
                  <li class="bg-red-600 list-group-item">
                    <span>600</span> /
                    <span>#f96868</span>
                  </li>
                  <li class="bg-red-500 list-group-item">
                    <span>500</span> /
                    <span>#fa7a7a</span>
                  </li>

                  <li class="bg-red-400 blue-grey-700 list-group-item">
                    <span>400</span> /
                    <span>#fa9898</span>
                  </li>

                  <li class="bg-red-300 blue-grey-700 list-group-item">
                    <span>300</span> /
                    <span>#fab4b4</span>
                  </li>

                  <li class="bg-red-200 blue-grey-700 list-group-item">
                    <span>200</span> /
                    <span>#fad3d3</span>
                  </li>

                  <li class="bg-red-100 blue-grey-700 list-group-item">
                    <span>100</span> /
                    <span>#ffeaea</span>
                  </li>
                </ul>
              </div>
              <div class="col-sm-4 col-md-3">
                <h5 class="text-uppercase">pink</h5>
                <ul class="list-group">
                  <li class="bg-pink-800 list-group-item">
                    <span>800</span> /
                    <span>#e53b75</span>
                  </li>
                  <li class="bg-pink-700 list-group-item">
                    <span>700</span> /
                    <span>#f44c87</span>
                  </li>
                  <li class="bg-pink-600 list-group-item">
                    <span>600</span> /
                    <span>#f96197</span>
                  </li>
                  <li class="bg-pink-500 list-group-item">
                    <span>500</span> /
                    <span>#f978a6</span>
                  </li>

                  <li class="bg-pink-400 blue-grey-700 list-group-item">
                    <span>400</span> /
                    <span>#fb8db4</span>
                  </li>

                  <li class="bg-pink-300 blue-grey-700 list-group-item">
                    <span>300</span> /
                    <span>#fba9c6</span>
                  </li>

                  <li class="bg-pink-200 blue-grey-700 list-group-item">
                    <span>200</span> /
                    <span>#ffccde</span>
                  </li>

                  <li class="bg-pink-100 blue-grey-700 list-group-item">
                    <span>100</span> /
                    <span>#fce4ec</span>
                  </li>
                </ul>
              </div>
              <div class="col-sm-4 col-md-3">
                <h5 class="text-uppercase">purple</h5>
                <ul class="list-group">
                  <li class="bg-purple-800 list-group-item">
                    <span>800</span> /
                    <span>#6d45bc</span>
                  </li>
                  <li class="bg-purple-700 list-group-item">
                    <span>700</span> /
                    <span>#7c51d1</span>
                  </li>
                  <li class="bg-purple-600 list-group-item">
                    <span>600</span> /
                    <span>#926dde</span>
                  </li>
                  <li class="bg-purple-500 list-group-item">
                    <span>500</span> /
                    <span>#a58add</span>
                  </li>

                  <li class="bg-purple-400 blue-grey-700 list-group-item">
                    <span>400</span> /
                    <span>#bba7e4</span>
                  </li>

                  <li class="bg-purple-300 blue-grey-700 list-group-item">
                    <span>300</span> /
                    <span>#d2c5ec</span>
                  </li>

                  <li class="bg-purple-200 blue-grey-700 list-group-item">
                    <span>200</span> /
                    <span>#e3dbf4</span>
                  </li>

                  <li class="bg-purple-100 blue-grey-700 list-group-item">
                    <span>100</span> /
                    <span>#f6f2ff</span>
                  </li>
                </ul>
              </div>
              <div class="col-sm-4 col-md-3">
                <h5 class="text-uppercase">indigo</h5>
                <ul class="list-group">
                  <li class="bg-indigo-800 list-group-item">
                    <span>800</span> /
                    <span>#465bd4</span>
                  </li>
                  <li class="bg-indigo-700 list-group-item">
                    <span>700</span> /
                    <span>#5166d6</span>
                  </li>
                  <li class="bg-indigo-600 list-group-item">
                    <span>600</span> /
                    <span>#677ae4</span>
                  </li>
                  <li class="bg-indigo-500 list-group-item">
                    <span>500</span> /
                    <span>#8897ec</span>
                  </li>

                  <li class="bg-indigo-400 blue-grey-700 list-group-item">
                    <span>400</span> /
                    <span>#9daaf3</span>
                  </li>

                  <li class="bg-indigo-300 blue-grey-700 list-group-item">
                    <span>300</span> /
                    <span>#bcc5f4</span>
                  </li>

                  <li class="bg-indigo-200 blue-grey-700 list-group-item">
                    <span>200</span> /
                    <span>#dadef5</span>
                  </li>

                  <li class="bg-indigo-100 blue-grey-700 list-group-item">
                    <span>100</span> /
                    <span>#edeff9</span>
                  </li>
                </ul>
              </div>
              <div class="col-sm-4 col-md-3">
                <h5 class="text-uppercase">blue</h5>
                <ul class="list-group">
                  <li class="bg-blue-800 list-group-item">
                    <span>800</span> /
                    <span>#3583ca</span>
                  </li>
                  <li class="bg-blue-700 list-group-item">
                    <span>700</span> /
                    <span>#4e97d9</span>
                  </li>
                  <li class="bg-blue-600 list-group-item">
                    <span>600</span> /
                    <span>#62a8ea</span>
                  </li>
                  <li class="bg-blue-500 list-group-item">
                    <span>500</span> /
                    <span>#89bceb</span>
                  </li>

                  <li class="bg-blue-400 blue-grey-700 list-group-item">
                    <span>400</span> /
                    <span>#a2caee</span>
                  </li>

                  <li class="bg-blue-300 blue-grey-700 list-group-item">
                    <span>300</span> /
                    <span>#bcd8f1</span>
                  </li>

                  <li class="bg-blue-200 blue-grey-700 list-group-item">
                    <span>200</span> /
                    <span>#d5e4f1</span>
                  </li>

                  <li class="bg-blue-100 blue-grey-700 list-group-item">
                    <span>100</span> /
                    <span>#e8f1f8</span>
                  </li>
                </ul>
              </div>
              <div class="col-sm-4 col-md-3">
                <h5 class="text-uppercase">cyan</h5>
                <ul class="list-group">
                  <li class="bg-cyan-800 list-group-item">
                    <span>800</span> /
                    <span>#37a9b7</span>
                  </li>
                  <li class="bg-cyan-700 list-group-item">
                    <span>700</span> /
                    <span>#47b8c6</span>
                  </li>
                  <li class="bg-cyan-600 list-group-item">
                    <span>600</span> /
                    <span>#57c7d4</span>
                  </li>
                  <li class="bg-cyan-500 list-group-item">
                    <span>500</span> /
                    <span>#77d6e1</span>
                  </li>

                  <li class="bg-cyan-400 blue-grey-700 list-group-item">
                    <span>400</span> /
                    <span>#9ae1e9</span>
                  </li>

                  <li class="bg-cyan-300 blue-grey-700 list-group-item">
                    <span>300</span> /
                    <span>#baeaef</span>
                  </li>

                  <li class="bg-cyan-200 blue-grey-700 list-group-item">
                    <span>200</span> /
                    <span>#d3eff2</span>
                  </li>

                  <li class="bg-cyan-100 blue-grey-700 list-group-item">
                    <span>100</span> /
                    <span>#ecf9fa</span>
                  </li>
                </ul>
              </div>
              <div class="col-sm-4 col-md-3">
                <h5 class="text-uppercase">teal</h5>
                <ul class="list-group">
                  <li class="bg-teal-800 list-group-item">
                    <span>800</span> /
                    <span>#178d81</span>
                  </li>
                  <li class="bg-teal-700 list-group-item">
                    <span>700</span> /
                    <span>#269b8f</span>
                  </li>
                  <li class="bg-teal-600 list-group-item">
                    <span>600</span> /
                    <span>#3aa99e</span>
                  </li>
                  <li class="bg-teal-500 list-group-item">
                    <span>500</span> /
                    <span>#56bfb5</span>
                  </li>

                  <li class="bg-teal-400 blue-grey-700 list-group-item">
                    <span>400</span> /
                    <span>#79d1c9</span>
                  </li>

                  <li class="bg-teal-300 blue-grey-700 list-group-item">
                    <span>300</span> /
                    <span>#99e1da</span>
                  </li>

                  <li class="bg-teal-200 blue-grey-700 list-group-item">
                    <span>200</span> /
                    <span>#cdf4f1</span>
                  </li>

                  <li class="bg-teal-100 blue-grey-700 list-group-item">
                    <span>100</span> /
                    <span>#ecfdfc</span>
                  </li>
                </ul>
              </div>
              <div class="col-sm-4 col-md-3">
                <h5 class="text-uppercase">green</h5>
                <ul class="list-group">
                  <li class="bg-green-800 list-group-item">
                    <span>800</span> /
                    <span>#279566</span>
                  </li>
                  <li class="bg-green-700 list-group-item">
                    <span>700</span> /
                    <span>#36ab7a</span>
                  </li>
                  <li class="bg-green-600 list-group-item">
                    <span>600</span> /
                    <span>#46be8a</span>
                  </li>
                  <li class="bg-green-500 list-group-item">
                    <span>500</span> /
                    <span>#5cd29d</span>
                  </li>

                  <li class="bg-green-400 blue-grey-700 list-group-item">
                    <span>400</span> /
                    <span>#7dd3ae</span>
                  </li>

                  <li class="bg-green-300 blue-grey-700 list-group-item">
                    <span>300</span> /
                    <span>#9fe5c5</span>
                  </li>

                  <li class="bg-green-200 blue-grey-700 list-group-item">
                    <span>200</span> /
                    <span>#bfedd8</span>
                  </li>

                  <li class="bg-green-100 blue-grey-700 list-group-item">
                    <span>100</span> /
                    <span>#e7faf2</span>
                  </li>
                </ul>
              </div>
              <div class="col-sm-4 col-md-3">
                <h5 class="text-uppercase">light-green</h5>
                <ul class="list-group">
                  <li class="bg-light-green-800 list-group-item">
                    <span>800</span> /
                    <span>#70a532</span>
                  </li>
                  <li class="bg-light-green-700 list-group-item">
                    <span>700</span> /
                    <span>#83b944</span>
                  </li>
                  <li class="bg-light-green-600 list-group-item">
                    <span>600</span> /
                    <span>#9ece67</span>
                  </li>
                  <li class="bg-light-green-500 list-group-item">
                    <span>500</span> /
                    <span>#acd57c</span>
                  </li>

                  <li class="bg-light-green-400 blue-grey-700 list-group-item">
                    <span>400</span> /
                    <span>#bad896</span>
                  </li>

                  <li class="bg-light-green-300 blue-grey-700 list-group-item">
                    <span>300</span> /
                    <span>#cadfb1</span>
                  </li>

                  <li class="bg-light-green-200 blue-grey-700 list-group-item">
                    <span>200</span> /
                    <span>#e0ecd1</span>
                  </li>

                  <li class="bg-light-green-100 blue-grey-700 list-group-item">
                    <span>100</span> /
                    <span>#f1f7ea</span>
                  </li>
                </ul>
              </div>
              <div class="col-sm-4 col-md-3">
                <h5 class="text-uppercase">yellow</h5>
                <ul class="list-group">
                  <li class="bg-yellow-800 list-group-item">
                    <span>800</span> /
                    <span>#fbc02d</span>
                  </li>
                  <li class="bg-yellow-700 list-group-item">
                    <span>700</span> /
                    <span>#f9cd48</span>
                  </li>
                  <li class="bg-yellow-600 list-group-item">
                    <span>600</span> /
                    <span>#f7da64</span>
                  </li>
                  <li class="bg-yellow-500 list-group-item">
                    <span>500</span> /
                    <span>#f7e083</span>
                  </li>

                  <li class="bg-yellow-400 blue-grey-700 list-group-item">
                    <span>400</span> /
                    <span>#f8e59b</span>
                  </li>

                  <li class="bg-yellow-300 blue-grey-700 list-group-item">
                    <span>300</span> /
                    <span>#f6e7a9</span>
                  </li>

                  <li class="bg-yellow-200 blue-grey-700 list-group-item">
                    <span>200</span> /
                    <span>#f9eec1</span>
                  </li>

                  <li class="bg-yellow-100 blue-grey-700 list-group-item">
                    <span>100</span> /
                    <span>#fffae7</span>
                  </li>
                </ul>
              </div>
              <div class="col-sm-4 col-md-3">
                <h5 class="text-uppercase">orange</h5>
                <ul class="list-group">
                  <li class="bg-orange-800 list-group-item">
                    <span>800</span> /
                    <span>#e98f2e</span>
                  </li>
                  <li class="bg-orange-700 list-group-item">
                    <span>700</span> /
                    <span>#ec9940</span>
                  </li>
                  <li class="bg-orange-600 list-group-item">
                    <span>600</span> /
                    <span>#f2a654</span>
                  </li>
                  <li class="bg-orange-500 list-group-item">
                    <span>500</span> /
                    <span>#f4b066</span>
                  </li>

                  <li class="bg-orange-400 blue-grey-700 list-group-item">
                    <span>400</span> /
                    <span>#f6be80</span>
                  </li>

                  <li class="bg-orange-300 blue-grey-700 list-group-item">
                    <span>300</span> /
                    <span>#fbce9d</span>
                  </li>

                  <li class="bg-orange-200 blue-grey-700 list-group-item">
                    <span>200</span> /
                    <span>#ffddb9</span>
                  </li>

                  <li class="bg-orange-100 blue-grey-700 list-group-item">
                    <span>100</span> /
                    <span>#fff3e6</span>
                  </li>
                </ul>
              </div>
              <div class="col-sm-4 col-md-3">
                <h5 class="text-uppercase">brown</h5>
                <ul class="list-group">
                  <li class="bg-brown-800 list-group-item">
                    <span>800</span> /
                    <span>#715146</span>
                  </li>
                  <li class="bg-brown-700 list-group-item">
                    <span>700</span> /
                    <span>#7d5b4f</span>
                  </li>
                  <li class="bg-brown-600 list-group-item">
                    <span>600</span> /
                    <span>#8d6658</span>
                  </li>
                  <li class="bg-brown-500 list-group-item">
                    <span>500</span> /
                    <span>#a17768</span>
                  </li>

                  <li class="bg-brown-400 blue-grey-700 list-group-item">
                    <span>400</span> /
                    <span>#b98e7e</span>
                  </li>

                  <li class="bg-brown-300 blue-grey-700 list-group-item">
                    <span>300</span> /
                    <span>#d3aa9c</span>
                  </li>

                  <li class="bg-brown-200 blue-grey-700 list-group-item">
                    <span>200</span> /
                    <span>#e2bdaf</span>
                  </li>

                  <li class="bg-brown-100 blue-grey-700 list-group-item">
                    <span>100</span> /
                    <span>#fae6df</span>
                  </li>
                </ul>
              </div>
              <div class="col-sm-4 col-md-3">
                <h5 class="text-uppercase">grey</h5>
                <ul class="list-group">
                  <li class="bg-grey-800 list-group-item">
                    <span>800</span> /
                    <span>#424242</span>
                  </li>
                  <li class="bg-grey-700 list-group-item">
                    <span>700</span> /
                    <span>#616161</span>
                  </li>
                  <li class="bg-grey-600 list-group-item">
                    <span>600</span> /
                    <span>#757575</span>
                  </li>
                  <li class="bg-grey-500 list-group-item">
                    <span>500</span> /
                    <span>#9e9e9e</span>
                  </li>

                  <li class="bg-grey-400 blue-grey-700 list-group-item">
                    <span>400</span> /
                    <span>#bdbdbd</span>
                  </li>

                  <li class="bg-grey-300 blue-grey-700 list-group-item">
                    <span>300</span> /
                    <span>#e0e0e0</span>
                  </li>

                  <li class="bg-grey-200 blue-grey-700 list-group-item">
                    <span>200</span> /
                    <span>#eeeeee</span>
                  </li>

                  <li class="bg-grey-100 blue-grey-700 list-group-item">
                    <span>100</span> /
                    <span>#fafafa</span>
                  </li>
                </ul>
              </div>
              <div class="col-sm-4 col-md-3">
                <h5 class="text-uppercase">blue-grey</h5>
                <ul class="list-group">
                  <li class="bg-blue-grey-800 list-group-item">
                    <span>800</span> /
                    <span>#263238</span>
                  </li>
                  <li class="bg-blue-grey-700 list-group-item">
                    <span>700</span> /
                    <span>#37474f</span>
                  </li>
                  <li class="bg-blue-grey-600 list-group-item">
                    <span>600</span> /
                    <span>#526069</span>
                  </li>
                  <li class="bg-blue-grey-500 list-group-item">
                    <span>500</span> /
                    <span>#76838f</span>
                  </li>

                  <li class="bg-blue-grey-400 blue-grey-700 list-group-item">
                    <span>400</span> /
                    <span>#a3afb7</span>
                  </li>

                  <li class="bg-blue-grey-300 blue-grey-700 list-group-item">
                    <span>300</span> /
                    <span>#ccd5db</span>
                  </li>

                  <li class="bg-blue-grey-200 blue-grey-700 list-group-item">
                    <span>200</span> /
                    <span>#e4eaec</span>
                  </li>

                  <li class="bg-blue-grey-100 blue-grey-700 list-group-item">
                    <span>100</span> /
                    <span>#f3f7f9</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <!-- End Example Color Palette -->


          <div class="color-application">
            <h3>Color Application</h3>
            <div class="row row-lg">
              <div class="col-lg-6">
                <!-- Example Choose Your Palette -->
                <div class="example-wrap">
                  <h4 class="example-title">Choose Your Palette</h4>
                  <p>Limit your selection of colors by choosing three color hues from
                    the primary palette and one accent color from the secondary
                    palette. The accent may or may not need fallback options.</p>
                  <div class="row">
                    <div class="col-sm-6">
                      <div class="example-wrap">
                        <div class="row">
                          <div class="col-sm-6">
                            <p>Active color</p>
                            <span>#4e97d9</span>
                          </div>
                          <div class="col-sm-6">
                            <div class="bg-blue-700 color-box">700</div>
                          </div>
                        </div>
                        <div class="row">
                          <div class="col-sm-6">
                            <p>Base color</p>
                            <span>#62a8ea</span>
                          </div>
                          <div class="col-sm-6">
                            <div class="bg-blue-600 color-box">600</div>
                          </div>
                        </div>
                        <div class="row">
                          <div class="col-sm-6">
                            <p>Hover color</p>
                            <span>#89bceb</span>
                          </div>
                          <div class="col-sm-6">
                            <div class="bg-blue-500 color-box">500</div>
                          </div>
                        </div>
                        <div class="row">
                          <div class="col-sm-6">
                            <p>Background opt.</p>
                            <span>#e8f1f8</span>
                          </div>
                          <div class="col-sm-6">
                            <div class="bg-blue-100 color-box blue-grey-700">100</div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="col-sm-6">
                      <div class="example-wrap">
                        <div class="row">
                          <div class="col-sm-6">
                            <p>Active color</p>
                            <span>#e9595b</span>
                          </div>
                          <div class="col-sm-6">
                            <div class="bg-red-700 color-box">700</div>
                          </div>
                        </div>
                        <div class="row">
                          <div class="col-sm-6">
                            <p>Base color</p>
                            <span>#f96868</span>
                          </div>
                          <div class="col-sm-6">
                            <div class="bg-red-600 color-box">600</div>
                          </div>
                        </div>
                        <div class="row">
                          <div class="col-sm-6">
                            <p>Hover color</p>
                            <span>#fa7a7a</span>
                          </div>
                          <div class="col-sm-6">
                            <div class="bg-red-500 color-box">500</div>
                          </div>
                        </div>
                        <div class="row">
                          <div class="col-sm-6">
                            <p>Background opt.</p>
                            <span>#ffeaea</span>
                          </div>
                          <div class="col-sm-6">
                            <div class="bg-red-100 color-box blue-grey-700">100</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- End Example Choose Your Palette -->
              </div>

              <div class="col-lg-6">
                <!-- Example Text Color -->
                <div class="example-wrap">
                  <h4 class="example-title">Text Color</h4>
                  <p>To convey a hierarchy of information, you can use different shades
                    for text. The standard content text color is #79838B.</p>
                  <div class="row margin-bottom-20">
                    <div class="col-sm-3">
                      <div class="example">
                        <div class="bg-blue-grey-700 text-color-box"></div>
                        <p>Title color</p>
                        <span>#37474f</span>
                      </div>
                    </div>
                    <div class="col-sm-3">
                      <div class="example">
                        <div class="bg-blue-grey-600 text-color-box"></div>
                        <p>Subtitle color</p>
                        <span>#526069</span>
                      </div>
                    </div>
                    <div class="col-sm-3">
                      <div class="example">
                        <div class="bg-blue-grey-500 text-color-box"></div>
                        <p>Text color</p>
                        <span>#76838f</span>
                      </div>
                    </div>
                    <div class="col-sm-3">
                      <div class="example">
                        <div class="bg-blue-grey-400 text-color-box"></div>
                        <p>Prompt color</p>
                        <span>#a3afb7</span>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- End Example Text Color -->
              </div>

              <div class="clearfix visible-lg-block"></div>

              <div class="col-lg-6">
                <!-- Example Use Alpha -->
                <div class="example-wrap margin-lg-0">
                  <h4 class="example-title">Use Alpha For Icons, And Dividers</h4>
                  <p>Icons and dividers, also benefit from having an alpha value of
                    black instead of a solid color, to make sure the color below.</p>
                  <div class="row">
                    <div class="col-lg-6 margin-bottom-10">
                      <div class="example">
                        <div class="bg-blue-grey-700 example-alpha">Grey Darkest</div>
                        <div class="row opacity-example">
                          <div class="col-sm-6">
                            <p>
                              <span>Normal:</span>
                              <span class="opacity-four"><i class="icon wb-image" aria-hidden="true"></i>40%</span>
                            </p>
                            <p>
                              <span>Hover:</span>
                              <span class="opacity-six"><i class="icon wb-image" aria-hidden="true"></i>60%</span>
                            </p>
                            <p>
                              <span>Active:</span>
                              <span class="blue-grey-700"><i class="icon wb-image" aria-hidden="true"></i>100%</span>
                            </p>
                          </div>
                          <div class="col-sm-6">
                            <p>
                              <span>Normal:</span>
                              <span class="opacity-six"><i class="icon wb-image" aria-hidden="true"></i>60%</span>
                            </p>
                            <p>
                              <span>Hover:</span>
                              <span class="opacity-eight"><i class="icon wb-image" aria-hidden="true"></i>80%</span>
                            </p>
                            <p>
                              <span>Active:</span>
                              <span class="blue-grey-700"><i class="icon wb-image" aria-hidden="true"></i>100%</span>
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="col-lg-6">
                      <div class="example">
                        <div class="bg-blue-grey-800 example-alpha">Gray Base</div>
                        <div class="example-alpha example-divider blue-grey-600">Dividers 10%</div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- End Example Use Alpha -->
              </div>
              <div class="col-lg-6">
                <!-- Example Border Color -->
                <div class="example-wrap">
                  <h4 class="example-title">Border Color</h4>
                  <p>Border color should use the primary #E6E8EA color, which should
                    be the main color of your project.</p>
                  <div class="example-border">
                    <div class="bg-blue-grey-200"></div>
                    <div>
                      <p>Border color</p>
                      <span>#e4eaec</span>
                    </div>
                  </div>
                </div>
                <!-- End Example Border Color -->
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- End Panel -->
    </div>
  </div>
  <!-- End Page -->


  <!-- Footer -->
  <footer class="site-footer">
    <div class="site-footer-legal">© 2016 <a href="http://themeforest.net/item/remark-responsive-bootstrap-admin-template/11989202">Remark</a></div>
    <div class="site-footer-right">
      Crafted with <i class="red-600 wb wb-heart"></i> by <a href="http://themeforest.net/user/amazingSurge">amazingSurge</a>
    </div>
  </footer>
  <!-- Core  -->
  <script src="../../global/vendor/jquery/jquery.min.js"></script>
  <script src="../../global/vendor/bootstrap/bootstrap.min.js"></script>
  <script src="../../global/vendor/animsition/animsition.min.js"></script>
  <script src="../../global/vendor/asscroll/jquery-asScroll.min.js"></script>
  <script src="../../global/vendor/mousewheel/jquery.mousewheel.min.js"></script>
  <script src="../../global/vendor/asscrollable/jquery.asScrollable.all.min.js"></script>
  <script src="../../global/vendor/ashoverscroll/jquery-asHoverScroll.min.js"></script>

  <!-- Plugins -->
  <script src="../../global/vendor/switchery/switchery.min.js"></script>
  <script src="../../global/vendor/intro-js/intro.min.js"></script>
  <script src="../../global/vendor/screenfull/screenfull.min.js"></script>
  <script src="../../global/vendor/slidepanel/jquery-slidePanel.min.js"></script>

  <!-- Scripts -->
  <script src="../../global/js/core.min.js"></script>
  <script src="../assets/js/site.min.js"></script>

  <script src="../assets/js/sections/menu.min.js"></script>
  <script src="../assets/js/sections/menubar.min.js"></script>
  <script src="../assets/js/sections/gridmenu.min.js"></script>
  <script src="../assets/js/sections/sidebar.min.js"></script>

  <script src="../../global/js/configs/config-colors.min.js"></script>
  <script src="../assets/js/configs/config-tour.min.js"></script>

  <script src="../../global/js/components/asscrollable.min.js"></script>
  <script src="../../global/js/components/animsition.min.js"></script>
  <script src="../../global/js/components/slidepanel.min.js"></script>
  <script src="../../global/js/components/switchery.min.js"></script>


  <script>
    (function(document, window, $) {
      'use strict';

      var Site = window.Site;
      $(document).ready(function() {
        Site.run();
      });
    })(document, window, jQuery);
  </script>



</body>

</html>